import { React, useState } from 'react'
import { Button, Checkbox, Form, Input, message } from 'antd'

const LoginForm = () => {
  let [loading, setLoding] = useState(false)
  const [form] = Form.useForm()
  // 表单验证成功事件
  const onFinish = (values) => {
    setLoding(true)
    console.log('Success:', values)
  }
  // 表单验证失败事件
  const onFinishFailed = (errorInfo) => {
    setLoding(true)
    message.error({
      content: '表单数据不完整',
      duration: 2,
      onClose: () => {
        setLoding(false)
      },
    })
  }
  return (
    <Form
      form={form}
      labelCol={{
        span: 6,
      }}
      wrapperCol={{
        span: 14,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="账号: "
        name="username"
        // 规则
        rules={[
          {
            required: true,
            message: '账号不能为空',
          },
          // 自定义验证规则
          // {
          //   validator: (rule, value) => {
          //     if (value.trim().length === 0) {
          //       return Promise.reject('不能输入为空格')
          //     }
          //     return Promise.resolve('')
          //   },
          // },
        ]}
      >
        {/* 这里的Input是一个组件，如果Input写在Form.Item组件子元素，而且Item他还设置了name属性，则Input无需管理 */}
        <Input placeholder="请输入有效的账号信息" />
      </Form.Item>

      <Form.Item
        label="密码: "
        name="password"
        rules={[
          {
            required: true,
            message: '密码不能为空',
          },
          // {
          //   validator: (rule, value) => {
          //     if (value.trim().length === 0) {
          //       return Promise.reject('输入不能为空')
          //     }
          //     return Promise.resolve('')
          //   },
          // },
        ]}
      >
        <Input.Password placeholder="请输入有效的密码" />
      </Form.Item>

      <Form.Item
        name="remember"
        valuePropName="checked"
        wrapperCol={{
          offset: 6,
          span: 14,
        }}
      >
        <Checkbox>记住我</Checkbox>
      </Form.Item>

      <Form.Item
        wrapperCol={{
          offset: 6,
          span: 14,
        }}
      >
        {/* 在这里的loading可以使用useState来进行状态管理的，相当于做了个防抖 */}
        <Button type="primary" htmlType="submit" loading={loading}>
          进入后台
        </Button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <Button
          type="primary"
          onClick={() => {
            form.resetFields()
          }}
        >
          重置
        </Button>
      </Form.Item>
    </Form>
  )
}

export default LoginForm
